<template>
  <div style="display: flex;align-items: flex-start; justify-content: space-between; gap: 20px">
    <el-card shadow="never" class="box-card">
      <div slot="header" style="display: flex; align-items: center; justify-content: space-between">
        <span>{{ meetingType }}会议列表</span>
        <el-button type="primary" size="mini" @click="createMeeting" icon="el-icon-plus">新建</el-button>
      </div>
      <el-table
          :data="filteredMeetings" size="mini" @row-click="handleRowClick" :cell-style="cellStyle"  border>
        <el-table-column type="index" width="50px"
                         label="序号">
        </el-table-column>
        <el-table-column label="会议名称"
                         prop="name">
        </el-table-column>
        <el-table-column width="70px"
                         label="发起人"
                         prop="promoter">
        </el-table-column>
        <el-table-column width="160px"
                         label="开始时间"
                         prop="startTime">
        </el-table-column>
        <el-table-column width="160px"
                         label="结束时间"
                         prop="endTime">
        </el-table-column>
        <el-table-column width="70px"
                         label="状态"
                         prop="status">
        </el-table-column>
      </el-table>
    </el-card>
    <Calendar></Calendar>
    <create-meeting :createMeetingVisible="createMeetingVisible"
                    :meetingDTO="meetingDTO"
                    @update:createMeetingVisible="createMeetingVisible=$event"
                    @release="handleCreate">
    </create-meeting>
  </div>
</template>

<script>
import CreateMeeting from "@/views/CreateMeeting";
import Calendar from '@/components/Calendar.vue';
import moment from "moment";

export default {
  name: "Meeting",
  components: {CreateMeeting, Calendar},
  data() {
    return {
      dialogFormVisible: false,
      meetingListVOS: [],
      meetingDTO: {
        name: '',
        organizerDeprt: '',
        subject: '',
        address: '',
        meetingTime: [],
        host: '',
        meetingAgendaList: [{agenda: '', host: ''}],
        promoter: '',
        requirement: '',
        meetingAttendeesList: [{name: ''}],
        attachment: [],
      },
      search: '',
      createMeetingVisible: false,
      meetingType: '',
      categoryId: '',
      customContent: {}
    }
  },
  computed: {
    filteredMeetings() {
      this.meetingType = this.$route.query.meetingType
      switch (this.meetingType) {
        case '党务工作会':
          this.categoryId = 1;
          break;
        case '党政联席会':
          this.categoryId = 4;
          break;
        case '业务会':
          this.categoryId = 2;
          break;
        case '评审会':
          this.categoryId = 3;
          break;
      }
      return this.meetingListVOS.filter(meeting => meeting.categoryId === this.categoryId);
    }
  },
  methods: {
    handleRowClick(row, index, event) {
      this.$router.push({
        name: 'MeetingDetail',
        query: {meetingId: row.meetingId}
      })
      console.log(row.meetingId)
    },
    createMeeting() {
      this.createMeetingVisible = true
    },
    handleCreate(data) {
      const meetingDTO = {
        ...this.meetingDTO,
        startTime: moment(data.meetingDTO.meetingTime[0]).format('YYYY/MM/DD HH:mm'),
        endTime: moment(data.meetingDTO.meetingTime[1]).format('YYYY/MM/DD HH:mm'),
        categoryId: this.categoryId,
        // 处理主持人姓名
        host: data.meetingDTO.host[data.meetingDTO.host.length - 1],
        // 处理参会人姓名
        // 处理参会人姓名，将每个元素转换为包含 name 属性的对象
        meetingAttendeesList: data.meetingDTO.meetingAttendeesList.map(item => {
          const attendeeName = Array.isArray(item) ? item[item.length - 1] : item;
          return {name: attendeeName};
        }),
        // 处理会议议程主持人姓名
        meetingAgendaList: data.meetingDTO.meetingAgendaList.map(agenda => ({
          ...agenda,
          host: agenda.host
        }))
      }
      console.log(JSON.stringify(meetingDTO, null, 2))
      this.$http.post("/meeting/release/", meetingDTO).then((response) => {
        if (response.data.code == 1) {
          this.$message({type: "success", message: `发布成功,已通知参会人`, showClose: true})
        } else {
          this.$message({type: "error", message: "发布失败:", showClose: true})
        }
      })
      this.createMeetingVisible = false;
    },
    cellStyle({row, column, rowIndex, columnIndex}) {
      if (column.property === 'name') {
        return {
          color: '#1989FA', // 蓝色文本
          textDecoration: 'underline', // 下划线
          cursor: 'pointer', // 鼠标悬停时显示手型
        };
      }
      return {};
    },
  },
  created() {
    this.$http.get("/meeting/list").then((response) => {
      if (response.data.code == 1) {
        this.meetingListVOS = response.data.data
        console.log(`会议列表数据:${JSON.stringify(this.meetingListVOS, null, 2)}`)
        this.meetingListVOS.forEach(meetingListVO => {
          const startDate = moment(meetingListVO.startTime).startOf('day');
          const endDate = moment(meetingListVO.endTime).startOf('day');
          const currentDate = startDate.clone();
          while (currentDate.isSameOrBefore(endDate)) {
            const dateStr = currentDate.format('YYYY-MM-DD');
            this.customContent[dateStr] = '会议';
            currentDate.add(1, 'day');
          }
        })
        this.calendarKey += 1;
      } else {
        this.$message({type: "error", message: "发布失败:", showClose: true})
      }
    })
  }
}
</script>
<style scoped>
::v-deep.el-calendar-table .el-calendar-day {
  font-size: 12px;
}

::v-deep .is-current {
  background-color: #84bd54; /* 当前日期的背景色 */
  font-weight: bold;
  border-radius: 10px;
  width: 20px;
  text-align: center;
  color: #ffffff;
}

::v-deep .el-calendar .el-calendar__body {
  padding: 0 !important;
}

::v-deep .el-calendar .el-calendar__body .el-calendar-table thead th {
  font-size: 13px !important;
}

::v-deep .el-calendar-table .el-calendar-day {
  height: 60px !important;
}

::v-deep .el-calendar .el-calendar__body .el-calendar-table tbody tr td p {
  font-size: 11px !important;
}

::v-deep .el-calendar {
  padding: 0 !important;
  margin: 0;
}
</style>